<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    #box{
        
        width:800px;height:600px;border:solid 10px red;
    }
    #ball{
        width:40px;height:40px;background-color: blue;
        border-radius: 20px;
        position: absolute;
        left:200px;
        top:200px;
    }
</style>
<body>
    <h1 id="time"></h1>
<div id="box">
    <div id="ball">

    </div>

</div>

<script>
    var x = 200;
    var y = 200;
    function g(v){
        return document.getElementById(v)
    }
    function setPos(){
        g('ball').style.left = x + 'px';
        g('ball').style.top  = y + 'px';
    }
    function dataFormat(d){
        return d.getFullYear() + '-' + (d.getMonth() +1)+ '-' + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ':' + d.getSeconds()
    }
    // setInterval(function(){
    //     document.getElementById('time').innerHTML = dataFormat(new Date())
    // }, 1000);
    
    var speedx = 10;
    var speedy = 10;
    setInterval(function(){
        x += speedx ; 
        y += speedy ;
        
        setPos()
    
        if(y+40>600 || y<=0){
            speedy = -speedy;
        }
        if(x+40>800 || x<=0){
            speedx = -speedx;
        }
    }, 50)

</script>
</body>
</html>

